<!-- 登录页 -->
<template>
  <div id="login">
    <div class="login-background"></div>
    <div class="login-container">
      <div class="color">
        <div class="login-head">
          <div class="login-logo"></div>
          <div class="website-name">CMUP</div>
          <div class="login-head-op">
            <span
              @click="loginToRegister(false)"
              :class="[!inlogin ? 'lg-button-active' : 'lg-button-inactive']"
              >登录</span
            >
            <span
              @click="loginToRegister(true)"
              :class="[inlogin ? 'lg-button-active' : 'lg-button-inactive']"
              >注册</span
            >
          </div>
        </div>
        <div class="login-container-head">
          <h2>欢迎使用</h2>
          <h4>some introduction</h4>
        </div>
      </div>
      <div class="color"></div>
      <div class="loginCard-container">
        <div class="loginCard" :class="[inlogin ? 'trans' : 'not-trans']">
          <h3 class="login-title">登录</h3>
          <form class="login-form">
            <h5>用户名</h5>
            <input
              v-model="loginForm.username"
              :class="[!usernameEx ? 'empty-error' : 'not-empty']"
            />
            <h5>密码</h5>
            <input
            type="password"
              v-model="loginForm.password"
              :class="[!passwordEx ? 'empty-error' : 'not-empty']"
              @keydown.enter="handleOK()"
            />
          </form>
          <button class="login-button" @click="handleOK()">确认</button>
        </div>
        <div class="loginCard" :class="[inlogin ? 'trans' : 'not-trans']">
          <h3 class="login-title">注册</h3>
          <form class="login-form">
            <h5>用户名</h5>
            <input
              v-model="loginForm.username"
              :class="[!usernameEx ? 'empty-error' : 'not-empty']"
              type="text"
            />
            <h5>密码</h5>
            <input
              type="password"
              v-model="loginForm.password"
              :class="[!usernameEx ? 'empty-error' : 'not-empty']"
            />
          </form>
          <button class="login-button" @click="registUser()">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      inlogin: false,
      usernameEx: true,
      passwordEx: true,
      loginForm: {
        username: "",
        password: "",
      },
    };
  },

  components: {},

  computed: {},

  methods: {
    loginToRegister(status) {
      console.log("loginToRegister");
      this.inlogin = status;
    },
    ifEmpty() {
      if (this.loginForm.username == "") {
        this.usernameEx = false;
      } else {
        this.usernameEx = true;
      }
      if (this.loginForm.password == "") {
        this.passwordEx = false;
      } else {
        this.passwordEx = true;
      }
      if (this.usernameEx == true && this.passwordEx == true) return true;
      else return false;
    },
    handleOK() {
      //   const that = this;
      if (this.ifEmpty() == true) {
        console.log("handelOK");
        const that = this;
        this.$getApi
          .login(this.loginForm.username, this.loginForm.password)
          .then((res) => {
            if (res.success == true) {
              window.localStorage.setItem("token", res.data.success.token);
              window.localStorage.setItem("userNo", res.data.success.userNo);
              console.log(window.localStorage.getItem("token"));
              let user = {
                account: "",
                token: res.data.success.token,
                userNo: window.localStorage.getItem("userNo"),
              };
              console.log(user);
              that.setUser(user);
              that.$router.push("/homepage");
            } else alert("账号或密码有误");
          })
          .catch((err) => {
            alert("网络错误");
            console.log(err);
          });
      }
    },
    registUser() {
      this.$getApi.newUser(this.loginForm.username, this.loginForm.password);
    },
    ...mapMutations(["setUser"]),
  },
  watch: {
    loginForm: {
      handler: function () {
        this.ifEmpty();
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
#login {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
/* .login-background{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -10;
        background-color: rgb(63, 87, 150);
    } */
.login-container {
  position: relative;
  height: 90%;
  width: 90%;
  box-shadow: 0px 0px 20px rgba(39, 56, 98, 0.904);
}
.loginCard-container {
  width: 35%;
  height: 55%;
  margin: 0 auto;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  top: -65%;
  display: flex;
  overflow: hidden;
}
/* 蓝色头部部分 */
.login-container .color:nth-child(1) {
  width: 100%;
  height: 50%;
  background-color: rgb(63, 87, 150);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.login-container-head {
  position: relative;
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: white;
  margin: 0;
  padding: 0;
  flex: 1 0 30%;
}
.login-head {
  position: relative;
  width: 100%;
  height: 20%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.website-name {
  font-size: 30px;
  font-weight: 900;
  color: white;
  height: 67px;
  margin: 0px 20px 0 40px;
  line-height: 67px;
}
.login-head-op {
  height: 22px;
  width: 100px;
  position: absolute;
  right: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.login-head-op > span {
  padding: 2px;
  font-size: 12px;
  font-weight: 500;
  width: 48px;
  text-align: center;
  height: 18px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.login-head-op > span:hover {
  background-color: rgb(72, 103, 181);
}
.lg-button-active {
  color: white;
  background-color: rgb(72, 103, 181);
  transform: scale(0.9);
  box-shadow: 0 1px 9px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}
.lg-button-inactive {
  color: rgb(78, 78, 78);
  background-color: white;
  box-shadow: 0 1px 9px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}
/* 蓝色头部部分 */
.login-container .color:nth-child(2) {
  width: 100%;
  height: 50%;
  background-color: rgb(230, 230, 230);
}
.loginCard {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: loginCardShow 1s cubic-bezier(0.76, 0.24, 0.33, 0.77);
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.trans {
  left: -100%;
  transition: all 0.2s ease-in-out;
}
.not-trans {
  left: 0;
  transition: all 0.2s ease-in-out;
}
@keyframes loginCardShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.login-title {
  display: block;
  margin: 20px auto 20px;
}
.login-form {
  width: 70%;
  height: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-form h5 {
  display: block;
  position: relative;
  color: rgb(123, 123, 123);
  transition: all 10s;
  left: 0;
  height: 15px;
  margin: 40px 0 0 0;
}
.login-form input {
  background: transparent;
  width: 100%;
  height: 18px;
  transition: all ease 0.5s;
  margin: 4px 0 0 0;
  padding: 0;
}
.login-form input:focus {
  border-bottom: 2px solid rgb(44, 44, 44);
  transition: all ease 0.5s;
}
.empty-error {
  border: none;
  outline-style: none;
  color: rgb(78, 78, 78);
  border-bottom: 2px solid rgb(209, 58, 58);
  animation: errorani 0.4s ease 1;
}
.not-empty {
  border: none;
  outline-style: none;
  color: rgb(78, 78, 78);
  border-bottom: 2px solid rgb(140, 140, 140);
}
@keyframes errorani {
  0% {
    transform: translateX(-20px);
  }
  15% {
    transform: translateX(20px);
  }
  30% {
    transform: translateX(-15px);
  }
  45% {
    transform: translateX(-15px);
  }
  60% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0);
  }
}
.login-button {
  position: relative;
  border: none;
  border-radius: 1px;
  width: 70%;
  background-color: rgb(101, 139, 253);
  height: 30px;
  top: 10%;
  color: white;
  font-size: 14px;
}
.login-button:hover {
  background-color: rgb(93, 123, 213);
}
.loginCard-container .loginCard p {
  position: relative;
  font-size: 12px;
  top: 15%;
  cursor: pointer;
}
</style>
